<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <!-- <router-view v-if="!$route.meta.keepAlive"></router-view>
  <keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive> -->
  <RouterView />
  <div v-if="$route.meta.showFooter" class="likeFooter"></div>
  <footer v-if="$route.meta.showFooter">
    <div class="footer-nav">
      <van-icon name="wap-home-o" size="20" />
      <RouterLink :to="{ path: '/' }">首页</RouterLink>
    </div>
    <div class="footer-nav">
      <van-icon name="star-o" size="20" />
      <RouterLink :to="{ path: '/favorites' }">收藏夹</RouterLink>
    </div>
    <div class="footer-nav">
      <van-icon name="user-o" size="20" />
      <RouterLink :to="{ path: '/me' }">我的</RouterLink>
    </div>
  </footer>
</template>

<style lang="scss" scoped>
.likeFooter {
  height: 56px;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100vw;
  height: 56px;
  background-color: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-around;

  .footer-nav {
    width: 33%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: black;
    cursor: pointer;

    .router-link-active {
      color: #f18721;
    }

    a {
      font-size: 16px;
      color: black;
    }
  }
}
</style>
